<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>广告管理</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/animate.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_1805932_ysrcp4y0uy9.css">
  <link rel="stylesheet" href="css/uploadImg.css">
  <!--日期选择插件-->
  <link rel="stylesheet" href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
</head>
<body>
<div class="container-fluid p-t-15">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">

          <div id="toolbar" class="toolbar-btn-action">
            <form class="form-inline" method="post" id="searchForm">
              <div class="form-group">
                <label>广告名称:</label>
                <input type="text" class="form-control" name="advertName">
              </div>
              <div class="form-group">
                <button class="btn btn-info btn_query btn-round" type="button" id="searchFormBtn">查询</button>
              </div>
              <div class="form-group">
                <button class="btn btn-success btn_query btn-round" type="button" id="addBtn">添加</button>
              </div>
              <div class="form-group">
                <button class="btn btn-warning btn_query btn-round" type="button" id="editBtn">编辑</button>
              </div>
              <div class="form-group">
                <button class="btn btn-danger btn_query btn-round" type="button" id="deleteBtn">删除</button>
              </div>
      </form>
    </div>

  </div>
  <div class="card-body">
    <table id="grid_data" class="table text-nowrap"></table>
  </div>
</div>
</div>
</div>

<!--  添加与编辑模态框 -->
<div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <span>添加/编辑</span>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div id="error_tips" style="color: #c9302c"></div>
      </div>
      <div class="modal-body">
        <form id="addOrEditForm" method="post" enctype="multipart/form-data">
          <div class="row">

            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon" id="basic-account">广告名称</span>
                <input type="hidden" name="addOrEditStatus" VALUE="0" id="addOrEditStatus" placeholder="添加或编辑图片状态控制">
                <input type="hidden" name="id">
                <input type="hidden" name="picUrl">
                <input type="hidden" name="deleteUrl">
                <input type="text" name="advertName" class="form-control">
                <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
              </div>
            </div>

            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon" id="start-time">开始时间</span>
                <input type="text" class="form-control js-datepicker" data-date-format="yyyy-mm-dd" name="startTime" placeholder="开始时间">
              </div>
            </div>

            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon" id="end-time">结束时间</span>
                <input type="text" class="form-control js-datepicker" data-date-format="yyyy-mm-dd" name="endTime" placeholder="结束时间">
              </div>
            </div>

            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon" id="basic-adverType">广告位置</span>
                <select name="advertPosition" class="form-control">
                  <option value="1">首页轮播</option>
                  <option value="2">其他</option>
                </select>
              </div>
            </div>

            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon">广告排序</span>
                <input type="text" name="advertOrder" class="form-control" onkeyup="this.value=this.value.replace(/[^bai0-9-]+/,'');">
              </div>
            </div>

            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon">跳转链接</span>
                <input type="text" name="advertUrl" class="form-control" placeholder="">
              </div>
            </div>

            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon">所属区域</span>
                <input type="text" name="city" class="form-control" placeholder="如：湛江市">
              </div>
            </div>

            <div class="col-xs-12">
              <div class="main u-main">
                <span class="label-left">上传图片</span>
                <div class="upload-content">
                  <div class="content-img">
                    <ul class="content-img-list"></ul>
                    <div class="file">
                      <i class="gcl gcladd"></i>
                      <input type="file" name="file" accept="image/*" id="upload">
                    </div>
                  </div>
                </div>
              </div>
            </div>

         </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary addSaveBtn" id="saveBtn">保存</button>
        </div>
        </form>
      </div>

    </div>
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.version.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.core.js"></script>
<!-- bootstrap表单验证插件 -->
<script type="text/javascript" src="js/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
<!-- bootstrap弹出框插件 -->
<script type="text/javascript" src="js/jquery.bootstrap.min.js"></script>
<!-- 表单填充插件 -->
<script type="text/javascript" src="js/jquery-form/jquery.formloader.js"></script>
<script src="js/uploadImg.js"></script>
<!--日期选择插件-->
<script src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">

  //设置表头
  var columns = [
    {checkbox: true},
    {field: 'id',title: '编号'},
    {field: 'advertName',title: '广告名称'},
    {field: 'advertPosition',title: '广告位置',formatter: function (value, row, index) {return value == 1 ? "首页轮播": "其他";}},
    {field: 'city',title: '所属区域'},
    {field: 'picUrl',title: '广告图片',formatter: function (value, row, index) {
        return value != null ? "<img style='width: 150px;height: 50px;' src='"+value+"'/>" : "";
    }},
    {field: 'advertOrder',title: '广告排序'},
    {field: 'advertUrl',title: '跳转链接',visible: false},
    {field: 'startTime',title: '开始时间',visible: false},
    {field: 'endTime',title: '结束时间',visible: false},
    {field: 'operatorTime',title: '操作时间', formatter: function (value,row,index) {
        return zero2one.dateFormat(value, 'Y-m-d H:i:s')
    }}
  ];

  //加载列表数据
  zero2one.datagrid("grid_data", "/remote/advert/list",function (params) {
    return $.extend(zero2one.tableInitParam(params), zero2one.form2json("searchForm"));
  }, columns);

  //点击查询按钮重新加载页面数据
  $("#searchFormBtn").click(function () {
      $('#grid_data').bootstrapTable('refresh');
  });

  //删除广告信息
  $("#deleteBtn").click(function () {
      var datas = $('#grid_data').bootstrapTable('getSelections');
      if(datas.length == 1){
        $.messager.confirm("温馨提示", "您确定要删除选中的数据吗?", function () {
          zero2one.request("/remote/advert/deleteByIds",{"ids": zero2one.dynamicArray2str(datas,"id"),
            "urls": zero2one.dynamicArray2str(datas,"picUrl"), "advertPosition": zero2one.dynamicArray2str(datas,"advertPosition")},function (data) {
              window.location.reload();
          });
        })
      }else{
        $.messager.alert("温馨提示", "请选择一条数据操作");
      }
  });

  //点击编辑按钮弹出模态框
  $("#editBtn").click(function () {
      var datas = $('#grid_data').bootstrapTable('getSelections');
      if(datas.length == 1){
        $("#addOrEditForm").formloader({data: datas[0]});
        $("#addOrEditStatus").val(1);
        if(datas[0].picUrl.length > 0){
           addNewContent(".content-img-list", datas[0].picUrl.split(","));
        }
        $("#addOrEditModal").modal("show");
      }else{
        $.messager.alert("温馨提示", "请选择一条数据操作");
      }
  });

  //点击添加按钮弹出模态框
  $("#addBtn").click(function () {
      $("#addOrEditForm")[0].reset();
      $("input[type='hidden']").val("");//清空hidden值
      $(".content-img-list").html("");//清空图片回显信息
      $("#addOrEditModal").modal("show");
  });

  //选择图片还没有上传
  var imgFile = uploadImg(".content-img-list", "upload", 1024 * 1024 * 4, 0);

  //表单校验
  $('#addOrEditForm').bootstrapValidator({
    fields: {
      advertName: {validators: {notEmpty: {message: '广告名称不能为空'}}},
      advertOrder: {validators: {notEmpty: {message: '广告排序不能为空'}}},
      city: {validators: {notEmpty: {message: '所属区域不能为空'}}}
    }
  });

  //添加编辑操作
  $("#saveBtn").click(function () {
      var bv = $('#addOrEditForm').data('bootstrapValidator');
      bv.validate();
      if (bv.isValid()) {
          var formFile = new FormData();
          // 遍历图片imgFile添加到formFile里面
          $.each(imgFile,function (i, v) {
            formFile.append("file", v)
          });
          handleImage('picUrl', 'deleteUrl');//编辑处理删除的图片
          zero2one.requestU("addOrEditForm","/remote/advert/addOrEdit",formFile,function (data) {
            window.location.reload();
          })
      }
  });

</script>
</div>
</body>
</html>
